<template>
  <div class="table-search-page">
    <a-card class="g-mt-10" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" :selfUpdate="true">
          <a-row :gutter="12">
            <!-- <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="排班日期">
                <a-range-picker v-model="tegistrationTime" style="width: 100%;" @change="timeSearchChange">
                  <a-icon slot="suffixIcon" type="calendar"/>
                </a-range-picker>
              </a-form-item>
            </a-col> 
            <a-col :md="1" :lg="1" :sm="12" style="padding: 0 4px"> </a-col> -->
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px">
              <a-form-item label="用户姓名">
                <a-input v-model="searchUserName" allow-clear placeholder="请输入用户名称" />
              </a-form-item>
            </a-col>
            <a-col :md="2" :lg="4" :sm="12">
              <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
                <!-- <a-icon :type="advanced ? 'up' : 'down'" @click="advanced=!advanced" style="margin-right: 15px;"/> -->
                <a-button type="primary" @click="clickSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
              </div>
            </a-col>
          </a-row>
       
        </a-form>
      </div>
    </a-card>
 
    <a-card :bordered="false" class="settlement-form-table"> 
      <a-button type="primary" @click="rosterListAdd()" class="btn-style-add">新增</a-button>
      <super-table  
        ref="table"
        :rowKey="(record,index)=> index"
        :columns="columns"
        :data="loadData"
        :bordered="true"
        style="margin-top:10px;"
      > 
        <!--序号-->
        <template slot="index" slot-scope="text,record,index">
          <span>{{(queryParam.pageNum-1)*queryParam.pageSize+(index+1)}}</span>
        </template>

        <!-- 操作 -->
        <template slot="action" slot-scope="text,record">
          <div  style="margin:0 auto">
      
            <a-button  class="btn-class-no-border" style="padding:0;" type="link" @click="editClick(record)"  >编辑</a-button> 
            
            <a-popconfirm title="作废该项数据?" @confirm="() => handRemove(record)">
              <a  class="btn-class-no-border">作废</a>
            </a-popconfirm>
          </div>
        </template>
      </super-table> 
     

    </a-card>
   
    <!-- 新增 -->
    <roster-list-add ref="rosterListAdd" :row_record="current_row_record"></roster-list-add>

    
  </div>
</template>

<script>   
import {SchedulingList, SchedulingDeleteTbShift} from '@/api/modular/main/rosterList/rosterList'
import { SuperTable, upTime } from '@/components'   
import moment from 'moment' 
import rosterListAdd from '@/views/workforceManagement/rosterList/components/rosterListAdd'
 
export default {
  components: {
    SuperTable,
    upTime, 
    rosterListAdd 
  },
   
  data() {
    return {  
      dataSource:[],
      loadData: parameter => {
        this.queryParam.pageNum = parameter.pageNum
        this.queryParam.pageSize = parameter.pageSize
        return SchedulingList(this.queryParam).then(res => {
          this.loading = false//关闭加载 
         
          this.dataSource = [...res.rows]
          res.rows = this.rowSpan('workDate2')
          let newData = Object.assign({},res)
          return newData
        })
      },
      form: this.$form.createForm(this), 
      advanced: false, // 高级搜索 展开/关闭 
      current_row_record: {},
      columns: [ 
        { title: '排班月份', align:'center', dataIndex: 'workDate2', width: 150, ellipsis: true,
          customRender: (text, record) => {
            return {
              children: text,
              attrs: {
                rowSpan: record.workDate2RowSpan,
              },
            }
          }
        },
        { title: '序号', scopedSlots: { customRender: 'index' }, align: 'center', width: 80 },
        { title: '医生名称', align:'center', dataIndex: 'userName', width: 140, ellipsis: true }, 
        { title: '科室名称', align:'center', dataIndex: 'deptName', width: 140, ellipsis: true }, 
        
        { title: '创建时间', align:'center', dataIndex: 'createTime', width: 150, ellipsis: true},  
        { title: '操作', align:'center', scopedSlots: { customRender: 'action' }, align:'center', width: 120,   }  
      ],
   
 
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
        current:1,
        type: 1,
        begintime: undefined,
        endtime: undefined,
        chargeType:1,
        reportType: 2
      },
      loading: true, //加载状态, 
      
 
      // 时间
      gettime:'', 
      watchBool:false,
      tegistrationTime: [], 
      searchUserName: ''

      

    }
  },
  created() {
   
  },
  watch:{
    watchBool(){
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      this.queryParam.current = 1
      this.queryParam = Object.assign({},this.queryParam)
      console.log(this.queryParam)
      
    }
  },
  methods: {
    // 合并
    rowSpan(key) {
      let arr = this.dataSource
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key])
          }
          return result
        }, [])
        .reduce((result, keys) => {
          const children = this.dataSource.filter((item) => item[key] === keys)
          result = result.concat(
            children.map((item, index) => ({
              ...item,
              [`${key}RowSpan`]: index === 0 ? children.length : 0,
            }))
          )
          return result
        }, [])
      this.dataSource = arr
      console.log(this.dataSource)
      return arr
    }, 
    // 编辑
    editClick(record){
      this.current_row_record = record
      this.$nextTick(() => {
        this.$refs.rosterListAdd.show('edit')
      })
    },
    handRemove(record){
      let sendData = {
        userId: record.userId,
        createTime: record.createTime
      }
      SchedulingDeleteTbShift(sendData).then(res => {
        if(res.code == 200){
          this.$refs.table.loadData() 
          this.$message.success(res.message)
        }else{
          this.$message.error(res.message)
        }
      })
    },  
    // 新增
    rosterListAdd(){
      this.$refs.rosterListAdd.show()
    },
    
    timeSearchChange(date,day){
      console.log(day)
      this.tegistrationTime = day
    },
  

    // 获取当前的日期
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss; 
    },
 
    checkPattern(str) {
      const pattern = new RegExp('[\u4E00-\u9FA5]+')
      if (pattern.test(str)) {
        return true
      }
      return false
    },
      
    moment,
    toCountDown(time) {
      //1000代表1秒，1000*60代表60分钟
      return Date.now() + parseInt(time) * 1000
    },
    minutesToSeconds(time) {
      return parseInt(time)
    },
   
    //点击查询-高级搜索
    clickSearch() { 
      this.watchBool = !this.watchBool
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      this.queryParam.current = 1

      let form_values = {}
      const time = this.tegistrationTime
      console.log(time)
      if (time && time.length > 0 && time[0] != '' && time[1] !='') {
        form_values.beginTime = moment(time[0]).format('YYYY-MM-DD')
        form_values.endTime = moment(time[1]).format('YYYY-MM-DD') 
      }else{
        form_values.beginTime = undefined
        form_values.endTime = undefined
      }
      form_values.userName = this.searchUserName ? this.searchUserName.replace(/\s*/g, '') : undefined
      
      this.queryParam = Object.assign(this.queryParam,form_values)

       
      this.$nextTick(() => { 
        this.$refs.table.loadData() 
      })
     
      
      
    },
    clickReset() {
      let form_values = {}
      this.tegistrationTime = [] 
      this.searchUserName = ''
      form_values.beginTime = undefined
      form_values.endTime = undefined 
      form_values.userName = undefined
      

      this.queryParam = Object.assign(this.queryParam,form_values)  
    },
     
   
   
  }

}
</script>

<style lang="less" scoped>

.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
  margin-bottom: 2px;
}

.currentRowClass {
  background: #e6f7ff;
}

/deep/ .ant-tabs-bar {
  // border-bottom: none;
  border-bottom: 1px solid #e8e8e8;
}

/deep/ .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
  right: -10px;
}
  
/deep/ .settlement-form-table{ 
  .ant-table-small.ant-table-bordered .ant-table-fixed-right{
    border-left: 0 !important;
    border-right: 0 !important;
  }
}
/deep/ .btn-style-add{
  margin-top: 20px;
}
/deep/ .not-border-btn-style,
/deep/ .not-border-btn-style:hover{
  font-size: 14px;
  border: 0;
  line-height: 5px;
  border-color: rgba(255, 255, 255, 0) !important;
}

/deep/ .btn-class-no-border {
  border-color: transparent !important;
  padding: 0;
  color: #5badff;
  font-size: 13px;
}

</style>